<template>
  <div class="center">
    <div class="main-content">
      <div class="header">
        <div class="logo">Bike租赁平台</div>
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label="当前状态">
            <el-select v-model.number="formInline.status" placeholder="状态">
              <el-option label="可租赁" value="可租赁"></el-option>
              <el-option label="使用中" value="使用中"></el-option>
            </el-select>
          </el-form-item>
          <el-select v-model.number="formInline.color" placeholder="颜色">
            <el-option label="黄色" value="黄色"></el-option>
            <el-option label="红色" value="红色"></el-option>
            <el-option label="黑色" value="黑色"></el-option>
            <el-option label="白色" value="白色"></el-option>
            <el-option label="灰色" value="灰色"></el-option>
            <el-option label="绿色" value="绿色"></el-option>
          </el-select>
          <el-form-item label="产品名称">
            <el-input v-model="formInline.description1" placeholder="产品名称"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onQuery">查询</el-button>
            <el-button type="primary" @click="onReset">重置</el-button>
          </el-form-item>
        </el-form>
        <el-col :span="1">
          <div @click="logout">
            <el-link>退出</el-link>
          </div>
        </el-col>
      </div>

      <div class="flex-container">
        <div class="flex-item">
          <el-carousel height="300px">
            <el-carousel-item v-for="item in Lunbo" :key="item">
              <img :src="item" alt="" class="carousel-image">
            </el-carousel-item>
          </el-carousel>
        </div>
        <div style="flex:3">
          <div @click="fly('/category/?categoryId=山地车')" class="category">
            <i class="el-icon-location-outline"></i>
            山地车
          </div>
          <div @click="fly('/category/?categoryId=公路车')" class="category">
            <i class="el-icon-location-outline"></i>
            公路车
          </div>
          <div @click="fly('/category/?categoryId=电动车')" class="category">
            <i class="el-icon-location-outline"></i>
            电动车
          </div>
        </div>
        <div style="flex: 5" @click="fly('/order/?id=' + user)">
          <i class="el-icon-document"></i>
          订单记录
        </div>
        <div style="flex: 2" @click="fly('/shopcar/?id=' + user)">
          <i class="el-icon-shopping-cart-full"></i>
          购物车
        </div>
        <div class="user-profile">
          <img @click="fly('/userdetail/?id='+user)" :src="bike.img ? require('@/assets/' + bike.img) : require('@/assets/background.png')" alt="User Avatar" class="user-avatar">
          <div>你好！张三</div>
        </div>
      </div>



      <div class="product-section">
        <div class="good">热卖商品</div>
        <div class="goods-row">
          <div class="goods-col" v-for="item in goods" :key="item.id">
            <div class="product-card">
              <img @click="fly('/detail/?id='+item.id)"  :src="require('@/assets/'+item.img)" alt="Product Image" class="product-image">
              <div class="product-info">
                <h3 class="product-title">{{ item.description1 }}</h3>
                <p class="product-price">￥{{ item.dayPrice }}元/天</p>
                <p class="product-price">￥{{ item.monthPrice }}元/月</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      bike: {},
      user: localStorage.getItem('bikeId'),
      Lunbo: [
        require('@/assets/1.jpg'),
        require('@/assets/山地车/1.11.jpg')
      ],
      currentPage: 1,
      pageSize: 50,
      goods: [],
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value1: [],
      value2: [],
      formInline:{}
    }
  },
  methods: {
    async onReset() {
      this.formInline = {}
      this.onQuery()
    },
     async onQuery() {
      console.log(this.formInline);
      // post 请求， 可以带 请求体 和 url的参数
      let params = "/"+ this.currentPage + "/" + this.pageSize
      let result = await this.$axios.post("/bikeSelDsql" + params, this.formInline)
      console.log(result);
      if (result.status == 200) {
        console.log(result.data.data)
      localStorage.setItem('catg',JSON.stringify(result.data.data))
        console.log(JSON.parse(localStorage.getItem('catg')) )
         this.$router.push('/search')

      } else {
        this.$message({
          type: 'error',
          message: result.message
        });
      }
      // this.formInline = {}
    },
    async loadgoods() {
      let goods = await this.$axios.get('/bike15')
      let result = await this.$axios.get('/userId/' + this.user)
      this.bike = result.data
      this.goods = goods.data.data;

      console.log(this.goods);
    },
    async logout() {
      this.$router.push('/login')
    },
    async fly(url) {
      localStorage.setItem('fool', '1')
      localStorage.setItem('f', '2')
      location.href = url
    },

  },
  beforeMount() {
    this.loadgoods();
  }
}
</script>

<style scoped>
.center {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  padding: 20px;
  background-color: #f5f5f5;
}
.main-content {
  width: 66%;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}
.header {
  background-color: #C566F6;
  color: white;
  text-align: center;
  padding: 20px;
  font-weight: bold;
  font-size: 18px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.logo {
  font-size: 24px;
  font-weight: bold;
}
.flex-container {
  display: flex;
  justify-content: space-between;
  padding: 20px;
}
.flex-item {
  width: 40%;
}
.category {
  cursor: pointer;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  font-size: 16px;
  color: #333;
}
.category i {
  margin-right: 10px;
}
.user-profile {
  flex: 3;
  background-color: #f9f9f9;
  border-radius: 15px;
  text-align: center;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.user-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin-bottom: 10px;
  cursor: pointer;
}
.good {
  background-color: forestgreen;
  width: 100px;
  text-align: center;
  margin-left: 10px;
  height: 40px;
  font-size: 20px;
  border-radius: 15px;
  line-height: 40px;
  color: white;
  margin-bottom: 20px;
}
.goods-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 10px 0;
}
.goods-col {
  width: calc(20% - 10px);
  margin: 5px;
  text-align: center;
}
.product-card {
  border: 1px solid #ebeef5;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease-in-out;
  cursor: pointer;
  height: 500px;
}
.product-card:hover {
  transform: translateY(-5px);
}
.product-image {
  width: 100%;
  height: auto;
  border-radius: 15px 15px 0 0;
  object-fit: cover;
}
.product-info {
  padding: 15px;
  text-align: center;
}
.product-title {
  margin: 0 0 10px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
}
.product-price {
  margin: 0;
  font-size: 14px;
  color: #666;
}
</style>